<template>
  <div class="box">
    <div class="head-fixed">
      <div class="head">
        <div class="head-city" @click="addr()">
          <span>{{ city_name }}</span>
          <img src="../../assets/xjt3.png" alt="" class="head-btm" />
        </div>
        <div class="head-title">
          <img src="../../assets/sousuo.png" alt="" />
          <input type="text" placeholder="请输入职位类型" v-model="search.titles" />
        </div>
        <div class="head-search" @click="getData">搜索</div>
      </div>
      <div class="con-top">
        <div @click="prop(0)">{{ areaValue }}</div>
        <div @click="prop(1)">{{ tradeValue }}</div>
        <div @click="prop(2)">{{ scaleValue }}</div>
        <div @click="prop(3)">{{ ageValue }}</div>
      </div>
    </div>
    <div class="content" style="overflow: auto;"
         v-infinite-scroll="loadMore"
         infinite-scroll-disabled="loading"
         infinite-scroll-distance="1">
      <!-- 当前用户为招聘者时 -->
      <div
        class="blocks"
        v-for="item in lists"
        @click="goDtl(item)"
        v-show="status == 1"
      >
        <img
          src="../../assets/zz.jpg"
          alt=""
          class="imgBlock"
          v-show="item.recruitType == 1"
        />
        <img
          src="../../assets/wp.jpg"
          alt=""
          class="imgBlock"
          v-show="item.recruitType == 2"
        />
        <div class="blocks-top">
          <div class="blocks-div">
            <span class="block-name">{{ item.userName }}</span>
            <img src="../../assets/yanzheng.png" alt="" class="block-img" />
          </div>
          <span class="block-pay">{{ item.salaryRange }}</span>
        </div>
        <div class="blocks-class">
          <!-- <span v-for="items in item.rqstd">{{ items.name }}</span> -->
           <span>{{item.name}}</span>
          <span>{{item.positionTitle}}</span>
          <span>{{item.workYear}}</span>
        </div>
        <div class="blocks-btm">
          <div>{{ item.updateTime }}</div>
          <div>
            <span>爽约率：{{ item.id }}</span>
          </div>
        </div>
      </div>
      <div v-show="loading===true" class="load">
        <span v-show="loads===true">已经到底了</span>
        <span v-show="loads===false">加载中</span>
      </div>
    </div>
    <mt-popup v-model="areaIf" position="bottom">
      <p class="mt-p">
        <span @click="off(0)">取消</span>
		    <span v-show="status == 1">请选择方式</span>
        <span @click="on(0)">确定</span>
      </p>
      <mt-picker
        :slots="area"
        @change="areaChange"
        value-key="name"
        class="picker"
      ></mt-picker>
    </mt-popup>

    <mt-popup v-model="tradeIf" position="bottom">
      <p class="mt-p">
        <span @click="off(1)">取消</span>
        请选择学历
        <span @click="on(1)">确定</span>
      </p>
      <mt-picker
        :slots="trade"
        @change="tradeChange"
        value-key="name"
        class="picker"
      ></mt-picker>
    </mt-popup>
    <mt-popup v-model="scaleIf" position="bottom">
      <p class="mt-p">
        <span @click="off(2)">取消</span>
        请选择薪资
        <span @click="on(2)">确定</span>
      </p>
      <mt-picker
        :slots="scale"
        @change="scaleChange"
        value-key="name"
        class="picker"
      ></mt-picker>
    </mt-popup>
    <mt-popup v-model="ageIf" position="bottom">
      <p class="mt-p">
        <span @click="off(3)">取消</span> 请选择年限
        <span @click="on(3)">确定</span>
      </p>
      <mt-picker
        :slots="ageLimit"
        @change="ageChange"
        value-key="name"
        class="picker"
      ></mt-picker>
    </mt-popup>
    <div class="footer">
      <div @click="go('/')">
        <img src="../../assets/shouye.png" alt=""/>
        首页
      </div>

      <div @click="go('/usersFind')" v-if="status != 1">
        <img src="../../assets/faxian.png" alt=""/>
        发现
      </div>
      <div @click="go('/companyFind')" class="footer-color" v-if="status == 1">
        <img src="../../assets/faxian1.png" alt=""/>
        发现
      </div>

      <div @click="go('/recommend')" >
        <img src="../../assets/tuijian.png" alt=""/>
        推荐
      </div>

      <div @click="go('/usersMy')" v-if="status != 1">
        <img src="../../assets/wode.png" alt=""/>
        我的
      </div>
      <div @click="go('/companyMy')" v-if="status == 1">
        <img src="../../assets/wode.png" alt=""/>
        我的
      </div>
    </div>
  </div>
</template>

<script>
import { Popup, Picker, InfiniteScroll } from 'mint-ui'
import Vue from 'vue'
var areaValue = '离职-随时到岗'
var areaCode = '1'
var tradeValue = '初中及以下'
var tradeCode = '1'
var scaleValue = '2-4k'
var scaleCode = '1'
var ageValue = '不限'
var ageCode = '1'
export default {
  inject: ['reload'],
  name: 'companyFind',
  components: { Popup, Picker },
  created () {
    this.$http({
      url: this.AppURL + '/userResume/list',
      method: 'post'
    }).then(({data}) => {
      console.log(data)
      let arr = []
      let arr2 = []
      data.jobStatusList.forEach(item => {
        let val = {id: item.id, name: item.jobStatus}
        arr2.push(val)
      })
      arr.push({values: arr2})
      this.area = arr
      console.log(this.area, "-----1-----1------")
    })
    this.getFaxianData()
  },
  mounted () {
    this.getData()
    // 获取城市
    this.city_id = localStorage.getItem('cityId')
    this.city_name = localStorage.getItem('cityName') ? localStorage.getItem('cityName') : '大连市'
  },
  // data() 为变量赋值等
  data () {
    return {
      city_id: '210200',
      city_name: '大连市',
      // 当前用户为求职者时
      faxianListData: {
        totalCount: '',
        pageSize: '',
        totalPage: '',
        currPage: '',
        list: []
      },
      titles: '',
      coId: localStorage.getItem('userId'),
      cityId: localStorage.getItem('cityId'),
      list: [],
      // 当前用户为招聘者时
      lists: [],
      areaValue: '状态',
      areaAct: 0,
      areaIf: false,
      area: [],
      tradeValue: '学历',
      tradeAct: 0,
      tradeIf: false,
      trade: [],
      scaleValue: '薪资',
      scaleAct: 0,
      scaleIf: false,
      scale: [],
      ageValue: '年限',
      ageAct: 0,
      ageIf: false,
      ageLimit: [],
      // status为用户身份，0是求职者，1是招聘者
      status: localStorage.status,
      search: {
        cityId: localStorage.getItem('cityId') ? localStorage.getItem('cityId') : '210200',
        titles: '',
        area: '',
        trade: '',
        scale: '',
        age: ''
      },
      pageSize: 50,
      pageNum: 0,
      loading: true,
      loads: false
    }
  },
  // methods 编写js函数
  methods: {
    loadMore () {
      console.log('loadMore.....')
      if (this.loading === false) {
        this.loading = true
        setTimeout(() => {
          this.pageNum = this.pageNum + 1

          this.getData()
          // alert("开始加载")
        }, 1500)
      }
    },
  // 个人登陆初始化查询职位
    getFaxianData () {
      this.$http({
        method: 'get',
        url: Vue.prototype.AppURL + '/comuser/get/recruit/dict'
      }).then(({data}) => {
        this.ageLimit = data.wordYear // 工作年限
        this.trade = data.edu // 学历
        this.scale = data.scale // 职位薪资
        // this.area = data.recruitType // 职位类型

        console.log(this.scale, "-----2-----1------")
      })
    },
    getData () {
      let that = this
      this.$http({
        methods: 'get',
        url: Vue.prototype.AppURL + '/userIntentionJob/get/company/intention/job?titles='
          + this.search.titles + '&area=' + this.search.area + '&trade=' + this.search.trade +
          '&scale=' + this.search.scale + '&age=' + this.search.age + '&cityId=' + this.search.cityId,
        params: {// 参数传到后端controller里
          page: this.pageNum,
          limit: this.pageSize
        }
      }).then(({data}) => {
        console.log(data)
        this.lists = data.list

        // 判断是否是最后一页
        if (data.list.length <= that.pageSize) { // 当查询的总条数小于每页的总条数时候
          that.loading = true// true是不显示
          that.loads = true
        } else {
          // 可以继续上拉更新
          that.loading = false// false是显示
          that.loads = false
        }
      })
    },
    go (r) {
      this.$router.push(r)
    },
    prop (i) {
      if (i === 0) {
        this.areaIf = !this.areaIf
      } else if (i === 1) {
        this.tradeIf = !this.tradeIf
      } else if (i === 2) {
        this.scaleIf = !this.scaleIf
      } else if (i === 3) {
        this.ageIf = !this.ageIf
      }
    },
    addr () {
      this.$router.push('/addr')
    },
    goDtl (item) {
      localStorage.setItem('company_resume_user_id', item.userId)
      localStorage.setItem('company_resume_bool', true)
      this.$router.push({name: 'companyResume', params: { userId: item.id, bool: true, find: true }})
    },
    areaChange (picker, values) {
      if (picker.values[0]) {
        areaValue = picker.values[0].name
        areaCode = picker.values[0].id
      }
    },
    tradeChange (picker, values) {
      if (picker.values[0]) {
        tradeValue = picker.values[0].name
        tradeCode = picker.values[0].id
      }
    },
    scaleChange (picker, values) {
      if (picker.values[0]) {
        scaleValue = picker.values[0].name
        scaleCode = picker.values[0].id
      }
    },
    ageChange (picker, values) {
      if (picker.values[0]) {
        ageValue = picker.values[0].name
        ageCode = picker.values[0].id
      }
    },
    on (i) {
      if (i === 0) {
        this.areaValue = areaValue
        this.search.area = areaCode
        this.areaIf = false
      } else if (i === 1) {
        this.tradeValue = tradeValue
        this.search.trade = tradeCode
        this.tradeIf = false
      } else if (i === 2) {
        this.scaleValue = scaleValue
        this.search.scale = scaleCode
        this.scaleIf = false
      } else if (i === 3) {
        this.ageValue = ageValue
        this.search.age = ageCode
        this.ageIf = false
      }
      console.log(this.search)
      this.getData()
    },
    off (i) {
      if (i === 0) {
        this.areaIf = false
      } else if (i === 1) {
        this.tradeIf = false
      } else if (i === 2) {
        this.scaleIf = false
      } else if (i === 3) {
        this.ageIf = false
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
html,
body,
.tac,
.box,
.tab-left,
.tab-left .el-menu {
  height: 100%;
}

.box {
  width: 100%;
  background: rgb(248, 248, 248);
}
.head-fixed {
  width: 100%;
  height: 76px;
  position: fixed;
  z-index: 999;
}
.head {
  background: #3e63a8;
  color: #fff;
  width: 100%;
  box-sizing: border-box;
  padding: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.head-btm {
  width: 10px;
}
.head-city {
  font-size: 12px;
  padding-right: 20px;
}
.head-city img {
  margin-left: 5px;
}
.head-title {
  flex: 1;
  width: 100%;
  box-sizing: border-box;
  padding: 0 10px;
  background: #fff;
  border-radius: 10px;
  display: flex;
  align-items: center;
  height: 26px;
}
.head-title img {
  width: 14px;
  margin-right: 5px;
}
.head-title input {
  border: 0;
  flex: 1;
  outline: none;
  font-size: 12px;
}
::-webkit-input-placeholder {
  font-weight: 100;
} /* 使用webkit内核的浏览器 */
:-moz-placeholder {
  font-weight: 100;
} /* Firefox版本4-18 */
::-moz-placeholder {
  font-weight: 100;
} /* Firefox版本19+ */
:-ms-input-placeholder {
  font-weight: 100;
}
.head-search {
  padding: 0 10px 0 20px;
  font-size: 14px;
}
.con-top {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 10px;
  background: #fff;
  border-bottom: 1px solid rgb(248, 248, 248);
}
.con-top div {
  width: 25%;
  height: 100%;
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center;
  color: #757575;
  font-size: 12px;
  border-right: 1px dashed #c7c7c7;
}
.con-top div:last-child {
  border: 0;
}
.more {
  font-size: 16px;
  color: #000;
  display: flex;
  align-items: center;
  padding: 0 10px;
}
.content {
  width: 100%;
  background: rgb(248, 248, 248);
  padding-bottom: 70px;
  display: flex;
  flex-flow: column;
  align-items: center;
  position: relative;
  top: 76px;
}
.block {
  width: 95%;
  box-sizing: border-box;
  padding: 10px 20px 10px 10px;
  background: #fff;
  margin-top: 10px;
  height: 90px;
  display: flex;
  flex-flow: column;
  justify-content: space-between;
  border-radius: 10px;
  box-shadow: 2px 2px 5px #c7c7c7;
  position: relative;
}
.block .block-top {
  font-size: 14px;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
}
.block-top span:first-child {
  color: #333;
  font-weight: 700;
}
.block-top span:last-child {
  color: #3e63a8;
}
.block-calss {
  width: 100%;
}
.block-class span {
  color: #757575;
  font-size: 10px;
  padding: 2px 0px;
  border-radius: 3px;
  margin-right: 10px;
}
.block-class span img {
  width: 12px;
}
.block-company {
  font-size: 12px;
  color: #757575;
}
.block-btn {
  width: 100%;
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #757575;
}
.imgBlock {
  position: absolute;
  top: 0;
  right: 0;
  width: 30px;
}
.block-btm{
  width: 100%;
  display: flex;
  justify-content: space-between;
  color: #757575;
  font-size: 12px;
}
.block-btm span{
  color: #3e63a8;
  margin-left: 5px;
}
.mint-popup {
  display: flex;
  flex-flow: column;
}
.popup-top {
  width: 100%;
  height: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.popup-top span {
  width: 25%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  border-bottom: 1px solid #c7c7c7;
}
.popup-top span:first-child {
  border-left: 0 !important;
}
.popup-top span:last-child {
  border-right: 0 !important;
}
.popup-class {
  width: 100%;
  box-sizing: border-box;
  padding: 20px;
  display: flex;
  flex-flow: column;
}
.popup-class .class-title {
  font-size: 14px;
  width: 100%;
  box-sizing: border-box;
  padding-bottom: 10px;
}
.popup-class .class-div {
  /* height: 100%; */
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  padding-bottom: 10px;
}
.class-div-ch1 {
  /* height: 100%; */
  display: flex;
  flex-flow: row;
}
.class-div-ch {
  /* height: 100%; */
  display: flex;
  flex-flow: column;
}
.popup-class span {
  font-size: 12px;
  /* padding: 5px 20px; */
  width: 100px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  display: inline-block;
  margin-right: 10px;
  border-radius: 2px;
  background: #eeeeee;
  box-sizing: border-box;
  border: 1px solid #eeeeee;
  color: #000;
  margin-bottom: 10px;
  /* border: 1px solid #757575; */
}
.active {
  color: #3e63a8 !important;
  border-color: #3e63a8 !important;
  background: #fff !important;
}
.blocks {
  width: 95%;
  box-sizing: border-box;
  padding: 10px 20px 10px 10px;
  background: #fff;
  margin-top: 10px;
  height: 90px;
  display: flex;
  flex-flow: column;
  justify-content: space-between;
  border-radius: 10px;
  box-shadow: 2px 2px 5px #c7c7c7;
  position: relative;
}
.blocks .blocks-top {
  font-size: 14px;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
}
.blocks-top .block-name {
  color: #333;
  font-weight: 700;
}
.blocks-top .block-pay {
  color: #3e63a8;
  position: relative;
  z-index: 50;
}
.blocks-div {
  display: flex;
  align-items: center;
}
.block-img {
  width: 14px;
  margin-left: 10px;
}
.blocks-calss {
  width: 100%;
}
.blocks-class span {
  color: #757575;
  font-size: 10px;
  padding: 2px 0px;
  border-radius: 3px;
  margin-right: 10px;
}
.blocks-class span img {
  width: 12px;
}
.blocks-company {
  font-size: 12px;
  color: #757575;
}
.blocks-btn {
  width: 100%;
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #757575;
}
.imgBlock {
  position: absolute;
  top: 0;
  right: 0;
  width: 30px;
}
.blocks-btm {
  width: 100%;
  display: flex;
  justify-content: space-between;
  color: #757575;
  font-size: 12px;
}

.blocks-btm span {
  color: #3e63a8;
  margin-left: 5px;
}

.load {
  font-size: 12px;
  color: #333;
  padding: 10px 0;
  width: 100%;
  text-align: center;
}
</style>
